import React, { FC, useMemo, useRef } from "react"
import { Space, Button, Typography, Input, Tooltip, InputRef, message, Popover } from "antd"
import { CopyOutlined, LeftOutlined, QrcodeOutlined } from "@ant-design/icons"
import { useNavigate, useParams } from "react-router-dom"
import useGetPageInfo from "../../../../hooks/useGetPageInfo"
import styles from "./StatHeader.module.scss"
import { QRCodeSVG } from "qrcode.react"

const { Title } = Typography

const StatHeader: FC = () => {
    const nav = useNavigate()

    // 获取当前问卷id
    const { id } = useParams()

    const { title, isPublished } = useGetPageInfo()

    // 拷贝链接 事件
    const urlInputRef = useRef<InputRef>(null)
    function copy() {
        console.log(urlInputRef)

        // 拷贝
        const elem = urlInputRef.current
        if (elem == null) return
        // 选中input的内容
        elem.select()
        // 拷贝选中的内容（富文本编辑器的操作）
        document.execCommand("copy")
        message.success("拷贝成功")
    }

    // function genLinkAndQRCodeElem() {
    //     if (!isPublished) return null

    //     // 拼接url，需要参考c端的规则
    //     const url = `http://localhost:8000/question/${id}`

    //     // 定义二维码组件
    //     const QRCodeElem = (
    //         <div style={{ textAlign: "center" }}>
    //             <QRCodeSVG value={url} size={150} />
    //         </div>
    //     )

    //     return (
    //         <Space>
    //             <Input value={url} style={{ width: "300px" }} ref={urlInputRef} />
    //             <Tooltip title="拷贝链接">
    //                 <Button icon={<CopyOutlined />} onClick={copy}></Button>
    //             </Tooltip>
    //             <Popover content={QRCodeElem}>
    //                 <Button icon={<QrcodeOutlined />}></Button>
    //             </Popover>
    //         </Space>
    //     )
    // }

    // 使用useMemo
    const LinkAndQRCodeElem = useMemo(() => {
        if (!isPublished) return null

        // 拼接url，需要参考c端的规则
        const url = `http://localhost:8000/question/${id}`

        // 定义二维码组件
        const QRCodeElem = (
            <div style={{ textAlign: "center" }}>
                <QRCodeSVG value={url} size={150} />
            </div>
        )

        return (
            <Space>
                <Input value={url} style={{ width: "300px" }} ref={urlInputRef} />
                <Tooltip title="拷贝链接">
                    <Button icon={<CopyOutlined />} onClick={copy}></Button>
                </Tooltip>
                <Popover content={QRCodeElem}>
                    <Button icon={<QrcodeOutlined />}></Button>
                </Popover>
            </Space>
        )
    }, [id, isPublished])

    return (
        <div className={styles["header-wrapper"]}>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Space>
                        <Button type="link" icon={<LeftOutlined />} onClick={() => nav(-1)}>
                            返回
                        </Button>
                        <Title>{title}</Title>
                    </Space>
                </div>
                {/* 不使用useMemo */}
                {/* <div className={styles.main}>{genLinkAndQRCodeElem()}</div> */}
                <div className={styles.main}>{LinkAndQRCodeElem}</div>
                <div className={styles.right}>
                    <Button type="primary" onClick={() => nav(`/question/edit/${id}`)}>
                        编辑问卷
                    </Button>
                </div>
            </div>
        </div>
    )
}

export default StatHeader
